<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 头像区域 -->
      <div class="avatar-box">
        <img src="../../assets/images/logo.png" alt="" />
      </div>
      <!-- 登录表单区域 -->
      <el-form
        :label-position="labelPosition"
        label-width="0px"
        :model="recoverpwForm"
        :rules="recoverpwFormRules"
        class="login-form"
        ref="recoverpwFormRef"
      >
        <el-form-item>
          <div class="btns" style="margin-top: 10px">
            <p class="text-muted" style="text-align: center">
              输入你的电子邮箱，我们会发送一封验证码邮件到你的邮箱，然后请你输入验证码以此验证你的身份
            </p>
          </div>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="email" :error="errorMsg">
          <el-input
            v-model="recoverpwForm.email"
            placeholder="如xxx@126.com"
            @blur.native.capture="checkEmail"
          ></el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item label="验证码" prop="clientCode">
          <el-input
            v-model="recoverpwForm.clientCode"
            placeholder="输入5位验证码"
            style="width: 246.5px"
          ></el-input>
          <el-button
            :disabled="recoverpwForm.show"
            type="primary"
            @click="emailCode()"
            style="
              width: 168px;
              padding: 12px 0px;
              margin-left: 36px;
              margin-top: 0px;
              background-color: #0acf97;
            "
            ><span v-show="recoverpwForm.show">{{ count }}s后重新</span
            >发送验证码</el-button
          >
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="recoverpwForm.password"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <!-- 按钮 -->
          <el-button type="primary" @click="onSubmit('recoverpwForm')"
            >重设密码</el-button
          >
        </el-form-item>
        <el-form-item>
          <div class="btns" style="margin-top: 32px">
            <p class="text-muted">
              回到
              <router-link to="/login"><b>登录</b></router-link>
            </p>
          </div>
        </el-form-item>
      </el-form>
      <div class="footer-box">
        <p class="account-copyright">2018 © Highdmin. - Coderthemes.com</p>
      </div>
    </div>
    <div id="starry-box">
      <vue-particles
        color="#fff"
        :particleOpacity="0.5"
        :particlesNumber="120"
        shapeType="circle"
        :particleSize="2"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="100"
        :moveSpeed="4"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </vue-particles>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      labelPosition: "top",
      // 登录表单的数据绑定对象
      recoverpwForm: {
        email: "",
        clientCode: "",
        password: "",
      },
      count: "",
      errorMsg: null,
      // 表单的验证规则对象
      recoverpwFormRules: {
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 2,
            max: 15,
            message: "长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱地址",
            trigger: "blur",
          },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur"],
          },
        ],
        clientCode: [
          {
            required: true,
            message: "请输入邮箱验证码",
            trigger: "blur",
          },
          {
            min: 5,
            max: 5,
            message: "长度为5个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    /**
     * 提交
     * @param formName
     */
    onSubmit() {
      this.$refs.recoverpwFormRef.validate(async (valid) => {
        if (!valid) return;
        let obj = {
          password: this.recoverpwForm.password,
          email: this.recoverpwForm.email,
          clientCode: this.recoverpwForm.clientCode,
        };
        let query = this.$qs.stringify(obj);

        try {
          await this.reqM1Service("person/password/update", query, "post").then(
            ({ data: res }) => {
              console.log(res);
              if (res.status == 200) {
                this.$message.success("修改密码成功");
                setTimeout(function () {
                  this.$router.push("/login");
                }, 1000);
              }
            }
          );
        } catch (errror) {
          this.$message.error("修改密码出错");
        }
      });
    },
    checkEmail() {
      let vm = this;
      vm.errorMsg = null;
      let obj = {
        email: this.recoverpwForm.email,
      };
      let query = this.$qs.stringify(obj);
      if (this.recoverpwForm.email == "") {
        return;
      } else {
        this.reqM1Service("person/check/mail", query, "post").then(
          ({ data: res }) => {
            console.log(res);
            if (res.status === 1) {
              vm.errorMsg = res.msg;
            }
          }
        );
      }
    },
    async emailCode() {
      if (this.recoverpwForm.email == "") {
        return this.$message.error("未输入邮箱");
      } else {
        let obj = {
          email: this.recoverpwForm.email,
        };
        let query = this.$qs.stringify(obj);
        try {
          const { data: res } = await this.reqM1Service(
            "person/send/mail",
            query,
            "post"
          );
          console.log(res);
          // 开启验证码延时
          this.getCode();
          this.recoverpwForm.show = true;
          this.$message.success(res.message);
        } catch (error) {
          this.$message.error("邮箱发送失败 19999");
        }
      }
    },
    // 验证莫延时**
    getCode() {
      const TIME_COUNT = 60;
      this.count = TIME_COUNT;
      let timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count -= 1;
          if (this.count == 0) {
            this.recoverpwForm.show = !this.recoverpwForm.show;
          }
        } else {
          // 重新开启
          clearInterval(timer);
        }
      }, 1000);
      //
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  height: 100%;
}

.login-box {
  width: 542px;
  height: 650px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar-box {
    height: auto;
    width: 140px;
    position: absolute;
    left: 50%;
    top: 13%;
    transform: translate(-50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.login-form {
  position: absolute;
  top: 20%;
  width: 100%;
  padding: 0 45px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: center;
}
.text-muted {
  color: #98a6ad !important;
}
b {
  color: #313a46;
}
.footer-box {
  height: auto;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%);
}

/deep/ .el-form-item__content {
  line-height: 30px;
}
/deep/ .el-form-item {
  margin-bottom: 10px;
}
/deep/ .el-form-item__label {
  padding-bottom: 0 !important;
  color: #313a46;
}
/deep/.el-input__inner {
  border: 1px solid #d9e3e9;
}
/deep/.el-input__inner:focus {
  border-color: #a2b9ca !important;
}
/deep/ .el-input input::-webkit-input-placeholder {
  color: #757575;
}
/deep/ .el-input input::-moz-input-placeholder {
  color: #757575;
}
/deep/ .el-input input::-ms-input-placeholder {
  color: #757575;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #02c0ce;
  border-color: #02c0ce;
}
/deep/.el-button {
  padding: 12px 197px;
  margin-top: 20px;
}
/deep/ .el-button--primary:focus,
.el-button--primary:hover {
  background: #02a8b5;
  border-color: #02a8b5;
}
/deep/.el-form-item.is-required:not(.is-no-asterisk)
  .el-form-item__label-wrap
  > .el-form-item__label:before,
/deep/.el-form-item.is-required:not(.is-no-asterisk)
  > .el-form-item__label:before {
  content: "";
  margin-right: 0;
}
/deep/.el-form-item__error {
  top: 0;
  right: 0 !important;
  padding-top: 0px;
  left: auto;
  margin-top: -20px;
}
/deep/.el-form-item.is-error .el-input__inner {
  background-color: #fbe2e2;
}

// 星空背景
#particles-js {
  background: #003c50;
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: -100;
}
</style>